<template>
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Index Template</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="./css/pure-nr-min.css">
    <link rel="stylesheet" href="./css/fontAwesome/font-awesome.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/admin.css">
</head>

<body>
    <!--BEGIN HEADER-->
    <div class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed head-menu">
        <a href="#" class="pure-menu-heading">
            <h3>物联网金融管理系统</h3>
        </a>
        <ul>
            <li class="pure-menu-selected"><a href="#">主页</a></li>
            <li><a href="#" @click="TakeInfo('IM')" v-show= "UT_Name =='管理员' " >项目管理</a></li>
            <li><a href="#" @click="TakeInfo('TZ')">投资管理</a></li>
            <li><a href="#">标签页</a></li>
            <li><a href="#">标签页</a></li>
        </ul>
        <div class="head-menu-info">
            欢迎您，{{ UT_Name }} <a href="#">{{ UL_Name }}</a>。您选择【首页】【退出】
        </div>
    </div>
    <!--END HEADER-->
    <div class="pure-g content">
        <div class="pure-u">
            <div class="side">
                
            </div>
        </div>
        <div class="pure-u-1">
            <div class="main">
                <div class="panel panel-default">
                    <div v-show="Imang">
                        <StaffInversShow></StaffInversShow>
                        
                    </div>
                    <div v-show="TZang" && UT_Name="管理员">
                        <ShowStaffInvers></ShowStaffInvers>
                    </div>

                    <div v-show="TZang" && UT_Name="普通用户">
                        <UserFinancingShow></UserFinancingShow>
                    </div>

                </div>
                
            </div>
        </div>
    </div>
    <!--BEGIN FOOT-->
    <!-- <div class="pure-g copyright">
        <div class="pure-u-1"> 2013 © TWStudio Admin Dashboard Template. </div>
    </div> -->
</body>

</html>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useStore } from '../store/index.ts';
import StaffInversShow from '../View/Invers/StaffInversShow.vue';
import ShowStaffInvers from '../View/Invers/ShowStaffInvers.vue';
import UserFinancingShow from '../View/Financing/UserFinancingShow.vue';

const store = useStore();

const UL_Name = ref('');
const UT_Name = ref('');

console.log(store.UserId);

//获取用户类型名称 和 用户名称
onMounted(() => {
    axios({
        url:'http://localhost:53279/api/User/GetUserTypeInfo',
        method:'get',
        params:{
            UId:store.UserId
        }
    })
    .then(function(res){
        console.log(res.data);
        UT_Name.value = res.data[0].UT_Name;
        UL_Name.value = res.data[0].UL_Name;
    })
    .catch(function(err){
        console.log(err);
    })
})

const Imang = ref(false);
const TZang = ref(false);

const TakeInfo = (msg:string) =>{
    switch(msg){
        case 'IM':
        Imang.value = true;
        TZang.value = false;
        break;
        case'TZ':
        Imang.value = false;
        TZang.value = true;
        break;
        
    }
}

</script>